<template>
  <div class="login-page">
    <div class="login-box">
      <h1>e店邦O2O平台</h1>
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label="'密\xa0\xa0\xa0\xa0码'" prop="password">
          <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="captchacode">
          <div class="captcha-box">
            <el-input v-model.number="ruleForm.captchacode"></el-input>
            <img height="40" :src="captchaSrc" @click="getCaptchacode" alt />
          </div>
        </el-form-item>
        <el-form-item id="login-btn-box">
          <el-button class="login-btn" type="primary" @click="submitForm('ruleForm')">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>


<script>
import { validateUsername } from "@/utils/validate";
import { GetCaptchaCodeApi, LoginApi } from "@/request/api";
import { mapActions, mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      ruleForm: {
        username: "qdtest1",
        password: "123456",
        captchacode: "888888",
      },
      //   规则
      rules: {
        username: [
          // 默认校验方式
          {
            required: true, //必填项
            message: "账号不能为空！！！", // 提示语
            trigger: "blur", // 触发时机
          },
          // 自定义校验方法
          {
            //   validator 验证工具/验证器
            validator: validateUsername,
            trigger: "blur", // 触发时机
          },
        ],
        password: [
          // 默认校验方式
          {
            required: true, //必填项
            message: "密码不能为空！！！", // 提示语
            trigger: "blur", // 触发时机
          },
        ],
        captchacode: [
          // 默认校验方式
          {
            required: true, //必填项
            message: "验证码不能为空！！！", // 提示语
            trigger: "blur", // 触发时机
          },
        ],
      },
      // 验证码图路径
      captchaSrc: "",
    };
  },

  methods: {
    // 获取vuex中的方法
    ...mapMutations({
      changeMenuData: "userMenuData/changeMenuData",
    }),
    ...mapActions({
      asyncChangeUserInfo: "userInfo/asyncChangeUserInfo",
    }),
    //   登录按钮校验规则
    submitForm(formForm) {
      this.$refs[formForm].validate(async (valid) => {
        // console.log(vali);
        if (valid) {
          // 校验通过，执行这里的代码
          //发起登录请求
          let res = await LoginApi({
            username: this.ruleForm.username,
            password: this.ruleForm.password,
            code: this.ruleForm.captchacode,
            uuid: localStorage.getItem("edb-captcha-uuid"),
          });
          if (!res) return;
          // 登录成功后的操作
          // 1、提示用户登录成功
          this.$message({
            message: "登录成功~",
            type: "success",
          });
          // 2、清除uuid
          localStorage.removeItem("edb-captcha-uuid");
          // 3、保存token
          localStorage.setItem("edb-authorization-token", res.token);
          // 4、跳转到首页
          this.$router.push("/");
          console.log(res);
          // 用户信息
          this.asyncChangeUserInfo();
        } else {
          // 校验没有通过，执行这里的代码
          this.$message({
            message: "亲~请输入正确的信息后再进行提交",
            // 弹框文字的提示符号
            type: "warning",
            // 弹框显示时间
            duration: 1000,
          });
          return false;
        }
      });
    },

    // 验证码
    async getCaptchacode() {
      let res = await GetCaptchaCodeApi();
      // 即表示res == false的时候，也就是res_data.code !== 200成立，就不会执行下面成功时候的操作
      if (!res) return;
      //   console.log(3333);

      // 展示验证码图片
      this.captchaSrc = "data:image/gif;base64," + res.img;
      //   保存uuid，给到登录时候作为参数传过去
      localStorage.setItem("edb-captcha-uuid", res.uuid);
    },
  },
  created() {
    // 验证码
    this.getCaptchacode();
    // 清空vuex中的menuData数据
    this.changeMenuData([]);
    console.log(this.menuData);
  },
  computed: {
    ...mapState({
      menuData: (state) => state.userMenuData.menuData,
    }),
  },
};
</script>
 
<style lang = "less" scoped>
.login-page {
  width: 100%;
  height: 100%;
  background: url("../../assets/images/loginBg.jpg") center top no-repeat;
  /* position: relative; */
  .login-box {
    width: 400px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding-top: 20px;
    padding-right: 40px;
    border-radius: 20px;
    h1 {
      text-align: center;
      margin-bottom: 20px;
      padding-left: 35px;
      font-size: 18px;
    }
    .captcha-box {
      display: flex;
      img {
        margin-left: 20px;
      }
    }
    .login-btn {
      width: 100%;
    }
    /* 覆盖element ui样式的正确写法  ::v-deep*/
    ::v-deep #login-btn-box .el-form-item__content {
      margin-left: 40px !important;
    }
  }
}
</style>